import React, { Component } from 'react'
import {Route,NavLink,Switch,Redirect} from 'react-router-dom'
import Hardware from '../hardware/index'
import Smartisan from '../smartisan/index'
import Costume from '../costume/index'
import Breathe from '../breathe/index'
import Health from '../health/index'
import './index.css'
export default class category extends Component {
    render() {
        return (
               <div id="category">
                <section className="search">
                    <section  className="search-bar">
                        <aside className="search-icon"></aside>
                        <aside className="search-val">T恤</aside>
                    </section>
                </section>
                <div className="category-container">
                    <section className="left-wrap">
                        <ul className="first-list">
                            <li className="active">
                              <NavLink to='/category/hardware'>智能硬件</NavLink>
                            </li>
                            <li className="">
                              <NavLink to='/category/smartisan'>smartisan</NavLink>
                            </li>
                            <li className="">
                              <NavLink to='/category/costume'> 鞋包服饰 </NavLink>
                            </li>
                            <li className="">
                              <NavLink to="/category/breathe">畅呼吸</NavLink> 
                            </li>
                            <li className="">
                              <NavLink to="/category/health">医药保健</NavLink>
                            </li>
                        </ul>
                    </section>
                    <section className="right-wrap">
                    <Switch>
                        <Route path='/category/hardware' component={Hardware} />
                        <Route path='/category/smartisan' component={Smartisan} />
                        <Route path='/category/costume' component={Costume} />
                        <Route path='/category/breathe' component={Breathe} />
                        <Route path='/category/health' component={Health} />
                        <Redirect from='/category' to="/category/hardware" exact />
                    </Switch>
                    </section>
                </div>
                </div> 
        )
    }
}
